<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #video1{
            width: 640px;
            height: 480px;
            margin-right:5px;
            margin-bottom:5px;
            float: left;
            box-sizing: border-box;
            object-fit: fill;
            background-color: black;
            z-index: -9999;
        }
        #video2{
            width: 640px;
            height: 480px;
            float: left;
            object-fit: fill;
            background-color: black;
        }
        #video3{
            width: 640px;
            height: 480px;
            margin-right:5px;
            margin-bottom:5px;
            object-fit: fill;
            background-color: black;
            float: left;
            clear: left;
        }
        #video4{
            width: 640px;
            height: 480px;
            float: left;
            object-fit: fill;
            background-color: black;
        }

        ul, li {
            margin: 0;
            padding: 0;
        }
        #myMenu{
            list-style: none;
            width: 150px;
            background-color: #ffffff;
            position: absolute;
            display: none;
        }

        #myMenu li{
            border-bottom: 1px solid #ccc;
            padding: 5px 10px;
            cursor: pointer;
        }

        #myMenu li:hover{
            background-color: #00ff00;
        }
    </style>
</head>
<body>


<div class="wfsjs1">
    <video muted="true" autoplay="true" id="video1" controls preload="true" onmousemove="mouseover(this)"; onmouseleave="mouseleave(this)";> </video>
    <!-- <video muted="true" autoplay="true" id="video1" onmousemove="mouseover(this)"; onmouseleave="mouseleave(this)";></video> -->
</div>
<div class="wfsjs2">
    <video muted="true" autoplay="true" id="video2" controls onmousemove="mouseover(this)"; onmouseleave="mouseleave(this)";></video>
</div>
<div class="wfsjs3" >
    <video muted="true" autoplay="true" id="video3" controls onmousemove="mouseover(this)"; onmouseleave="mouseleave(this)";></video>
</div>
<div class="wfsjs4" >
    <video muted="true" autoplay="true" id="video4" controls onmousemove="mouseover(this)"; onmouseleave="mouseleave(this)";></video>
</div>

<ul id="myMenu">
    <li>Play Video</li>
    <li>Stop Video</li>
    <li>Ptz Start</li>
    <li>Ptz Stop</li>
</ul>


<script type="module" src="c2sdk_web.js"></script>
<script>
    function  mouseover(o) {
        o.style.border='2px solid red';
    }
    function  mouseleave(o) {
        o.style.border='none';
    }
</script>

<script type="module">
import {startPreview,createConn,stopPreview,ptzControl} from './c2sdk_web.js';
	
	var conn = null;
    var prev = new Array();
    
function connStateCb(event) {

}

function alarmcb(data) {
    
}

function  previewDemo() {
    var video1 = document.getElementById("video1");
    var video2 = document.getElementById("video2");
    var video3 = document.getElementById("video3");
    var video4 = document.getElementById("video4");
    var previewPara1 = {
        devip : "10.8.16.223",
        port  : 8000,
        chn   : 33,
        type  : 0,   //大小码流
        hwnd  : video1
    }

    // var eventTester = function(e){
    // video1.addEventListener(e,function(){
    //     console.log((new Date()).getTime(),e)
    //     console.log(video1.currentTime)
    //     },false);
    // }
    // 
    // eventTester("loadstart"); //客户端开始请求数据
    // eventTester("progress"); //客户端正在请求数据
    // eventTester("suspend"); //延迟下载
    // eventTester("abort"); //客户端主动终止下载（不是因为错误引起）
    // eventTester("loadstart"); //客户端开始请求数据
    // eventTester("progress"); //客户端正在请求数据
    // eventTester("suspend"); //延迟下载
    // eventTester("abort"); //客户端主动终止下载（不是因为错误引起），
    // eventTester("error"); //请求数据时遇到错误
    // eventTester("stalled"); //网速失速
    // eventTester("play"); //play()和autoplay开始播放时触发
    // eventTester("pause"); //pause()触发
    // eventTester("loadedmetadata"); //成功获取资源长度
    // eventTester("loadeddata"); //
    // eventTester("waiting"); //等待数据，并非错误
    // eventTester("playing"); //开始回放
    // eventTester("canplay"); //可以播放，但中途可能因为加载而暂停
    // eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕
    // eventTester("seeking"); //寻找中
    // eventTester("seeked"); //寻找完毕
    // eventTester("timeupdate"); //播放时间改变
    // eventTester("ended"); //播放结束
    // eventTester("ratechange"); //播放速率改变
    // eventTester("durationchange"); //资源长度改变
    // eventTester("volumechange"); //音量改变
    prev[0] = startPreview(conn, previewPara1);

    var previewPara2 = {
        devip : "10.8.16.223",
        port  : 8000,
        chn   : 34,
        type  : 0,   //大小码流
        hwnd  : video2
    }
    prev[1] = startPreview(conn, previewPara2);

    var previewPara3 = {
        devip : "10.8.16.223",
        port  : 8000,
        chn   : 35,
        type  : 0,   //大小码流
        hwnd  : video3
    }
    prev[2] = startPreview(conn, previewPara3);

    var previewPara4 = {
        devip : "10.8.16.223",
        port  : 8000,
        chn   : 39,
        type  : 0,   //大小码流
        hwnd  : video4
    }
    prev[3] = startPreview(conn, previewPara4);
}

window.onload = function () {

    var loginParam = {
            ip  : "10.8.3.56",
            port : 8803,
            user : "admin",
            password : "96e79218965eb72c92a549dd5a330112",
            state : connStateCb,
			alarmcallback : alarmcb
    }

    conn = createConn(loginParam, null);

    setTimeout(previewDemo, 1000);
    // previewDemo();
}

var cmd = 0;

var myMenu = document.getElementById("myMenu");
document.addEventListener("contextmenu", function(event){
    event.preventDefault();
    myMenu.style.display = "block";
    myMenu.style.top = event.clientY + "px";
    myMenu.style.left = event.clientX + "px";
});

document.addEventListener("click", function(event) {
    myMenu.style.display = "none";

    var index = 0;
    var bfound = 0;
    var videotag;
    for (index = 1; index <= 4; ++index) {
        videotag = "video" + index;
        var div = document.getElementById(videotag);
        var x = event.clientX;
        var y = event.clientY;
        var divx1 = div.offsetLeft;
        var divy1 = div.offsetTop;
        var divx2 = div.offsetLeft + div.offsetWidth;
        var divy2 = div.offsetTop + div.offsetHeight;
        if (x >= divx1 && x <= divx2 && y >= divy1 && y <= divy2) {
            bfound = 1;
            break;
        }
    }

    if (!bfound) {
        return;
    }

    var tag = event.target || event.srcElement;

    var chnNo = 33;
    if (index == 1) {
        chnNo = 35;
    }
    else if (index == 2) {
        chnNo = 33;
    }
    else if (index == 3) {
        chnNo = 34;
    }
    else {
        chnNo = 35;
    }

    if (tag.innerText == "Play Video") {
        if (null != prev[index - 1]) {
            return;
        }
        var video = document.getElementById(videotag);
        var previewPara1 = {
            devip: "10.8.16.223",
            port: 8000,
            chn: chnNo,
            type: 1,   //大小码流
            hwnd: video
        }

        prev[index - 1] = startPreview(conn, previewPara1);
    }
    else if (tag.innerText == "Stop Video") {
        if (null == prev[index - 1]) {
            return;
        }

        stopPreview(prev[index - 1]);
        prev[index - 1] = null;
    }
    else if (tag.innerText == "Ptz Start") {

        if (null == prev[index - 1]) {
            return;
        }

        cmd = cmd+1;
        if (cmd  > 4) {
            cmd = 18;
        }

        var ptzParam = {
            devip :prev[index - 1].previewPara.devip,
            devport: prev[index - 1].previewPara.port,
            chn : prev[index - 1].previewPara.chn,
            cmd : cmd,
            stop : 0,
            speed : 5,
            preset : 1,
        }

        ptzControl(conn, ptzParam);

        if (cmd == 18) {
            cmd = 0;
        }
    }
    else if (tag.innerText == "Ptz Stop") {
        if (null == prev[index - 1]) {
            return;
        }

        var ptzParam = {
            devip :prev[index - 1].previewPara.devip,
            devport: prev[index - 1].previewPara.port,
            chn : prev[index - 1].previewPara.chn,
            cmd : cmd,
            stop : 1,
            speed : 5,
            preset : 1,
        }

        ptzControl(conn, ptzParam);
    }
 });
</script>
</body>
</html>
